<script setup>
import useFenLeiPinia from '@/stores/models/useFenLeiPinia';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref, defineProps, defineEmits} from 'vue'
import { useAddText, useUpdateText } from '@/api/textApi'
import { Plus } from '@element-plus/icons-vue';
import getfenLeiString from '@/components/getFenlLeiString'
import { urlToFile } from '@/utils/updateToFile'
// import '@/components/ImageUploader.vue'
  const fenLeiPinia = useFenLeiPinia()

// --------------------------

// 定义变量
  // 拿到分类数据，fenLeiPinia.fenLeiString就是数据
  // const fenLeiPinia = useFenLeiPinia()
  // 用来装分类的
  // const fenLeiBox = ref({})
  // 用来接收父组件数据的盒子
  const textList = ref({})
  // 图片显示
  const imgUrl = ref('')
  // 加载
  const loading = ref(false)

// ---------

// 父与子的传输
  // 接收父组件的值
  const props = defineProps({
    isShowAddText: Boolean,
    postChildText: Object
  })
  const emit = defineEmits(['update:isShowAddText','update:postChildText','success'])

// --------------

// 一进页面的逻辑
  console.log('38进入弹框了')
  loading.value = true
  // 渲染分类
  // const xuanRanFenLei = async () => {
  //   loading.value = true
  //   await getfenLeiString()
  //   fenLeiBox.value = fenLeiPinia.fenLeiString
  // }
  // xuanRanFenLei()
  // 渲染输入框，传下来的值为textList.value
  setTimeout(() => {
    textList.value = props.postChildText
    console.log(`44已经传下来的textList.value`,textList.value)
    if (!textList.value.cover_img) {
      imgUrl.value = null
    }else {
      imgUrl.value = `http://big-event-vue-api-t.itheima.net${textList.value.cover_img}`
    }
    loading.value = false
  },500)
  console.log('47打印一下拼好的路径',imgUrl.value)

// ''''''''''''''''''''''''''''

// 控制弹框是否显示隐藏，×按钮
  // 点击按钮显示弹框
  const updateIsShowAddText = () => {
    emit('update:isShowAddText',false)
  }

// --------

// 点确认按钮后，把弹框数据都传出去
  // 上传照片逻辑
  const getImgUrl = (uploadFile) => {
    imgUrl.value = URL.createObjectURL(uploadFile.raw)
    textList.value.cover_img = uploadFile.raw
    console.log('执行到这里代表图片格式已经正确',textList.value.cover_img)
  }
  // 点击提交
  const subMitDomList = (isFabu,id) => {
    loading.value = true
    // 先把dom获取过来
    const myTitle = document.querySelector('.titleInput')
    const myFenLei = document.querySelector('.fenLeiSelect')
    const mytxet = document.querySelector('textarea')
    // 把结果给待提交对象
    textList.value.title = myTitle.value
    textList.value.cate_id = myFenLei.value
    textList.value.content = mytxet.value
    textList.value.state = isFabu
    console.log('73点提交后的textList.value.cate_id,myFenLei.value',textList.value.cate_id,myFenLei.value)
    // 校验
    if(
      myFenLei.value === '' ||
      myTitle.value === '' ||
      myTitle.value.length > 30 ||
      mytxet.innerHTML === '' 
      ) 
    {
      emit('update:isShowAddText',false)
      alert('内容不能为空')
      return
    }
    if (id) {
    // 修改请求
      // 用来把地址转成flie的组件
      urlToFile(`http://big-event-vue-api-t.itheima.net${textList.value.cover_img}`, 'avatar.jpg')
      .then(file => {
      console.log('111转换成功:', file);
      // 给textList.value赋值flie
      textList.value.cover_img = file
      console.log('112赋值成功，textList.value',textList.value)
      // 把textList.value转换成fromdate格式
      const fd = new FormData()
      for (let key in textList.value) {
        fd.append(key, textList.value[key])
      }
      // 发送修改请求接口
      const updateApi = async () => {
        await useUpdateText(fd)
        console.log('113修改完后准备告诉父亲了')
        emit('success',null)
        emit('update:isShowAddText',false)
        loading.value = false
      }
      updateApi()
      })
      .catch(error => {
      console.error('转换失败:', error);
      });
      
    }else {
    // 添加请求
      // 把textList.value转换成fromdate格式
      const fd = new FormData()
      for (let key in textList.value) {
        fd.append(key, textList.value[key])
      }
      // 发送添加接口
      const addApi = async () => {
        await useAddText(fd)
        emit('success',null)
        emit('update:isShowAddText',false)
        loading.value = false
      }
      addApi()
    }
    // 不管是添加还是编辑都会执行这里
    // history.go(0)
    // 最后还要提示父组件重新渲染数据
    
    
  }
</script>

<template>
<!-- 文章弹框 -->
    <div class="addWenZhang" v-if="true"
    v-loading="loading"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.7)"
    >
      <div class="top">
        <div class="title">添加文章</div>
        <div class="del" @click="updateIsShowAddText">x</div>
      </div>
      <div class="inp">
        <div>文章标题</div>
        <input type="text" class="titleInput" :value="textList.title">
      </div>
      <div class="sel">
        <div>文章分类</div>
        <select name="" id="" class="fenLeiSelect">
          <option :value=item.id v-for="item in fenLeiPinia.fenLeiString" :key="item.id" >{{ item.cate_name }}</option>
        </select>
      </div>
      <div class="imgFenlei">
        <div class="div">文章封面</div>
        <div class="imgBox">

          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="getImgUrl"
          >
            <img v-if="imgUrl" :src="imgUrl" class="imgUrl" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>

        </div>
      </div>
      <div class="contentBox">
        <div>文章内容</div>
        <!-- <div class="content" ref="content">
          <QuillEditor theme="snow" /> 
        </div> -->
        <textarea name="" id="" placeholder="请输入内容" :value="textList.content">
        </textarea>
      </div>
      <div class="foot">
        <button class="minBtn btn1" @click="subMitDomList('已发布',textList.id)">发布</button>
        <button class="minBtn btn2" @click="subMitDomList('草稿',textList.id)">草稿</button>
      </div>
    </div>
</template>

<style scoped>
.addWenZhang {
  width: 500px;
  min-height: 1000px;
  height: 100vh;
  /* height: 1000px; */
  /* top: 50%; */
  /* left: 50%; */
  right: 0;
  top: 0;
  /* transform: translate(-50%,-50%); */
  /* position: absolute; */
  position: fixed;
  padding: 5px;
  background-color: rgb(187, 211, 249);
  /* border-radius: 10px; */
  z-index: 2;
  /* transform: translate(10px,-10px); */
}
.top{
  width: 100%;
  height: 40px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .title{
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}
.top .del{
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.top .del:hover{
  opacity: 0.7;
}
.inp,.sel{
  width: 100%;
  height: 40px;
  margin-bottom: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.inp div,.sel div{
  width: 70px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
.inp input{
  width: 300px;
  height: 22px;
  display: block;
  outline: none;
  margin: 0;
  padding: 0;
}
.sel select{
  width: 300px;
  height: 25px;
  display: block;
  outline: none;
}
.imgFenlei{
  width: 100%;
  height: 100px;
  display: flex;
  margin-bottom: 5px;
  /* justify-content: center; */
  align-items: center;
  position: relative;
}
.imgFenlei .div{
  /* width: 70px;
  height: 100px;
  line-height: 40px;
  text-align: center;*/
  font-size: 14px; 
  /* left: 10px; */
  /* display: block;
  position: relative;*/
  margin-left: 66px; 
}
.imgFenlei .imgBox{
  /* width: 100px;
  height: 100px; */
 /* display: block;
  overflow: hidden;
  margin-left: 0px;
  cursor: pointer; */
  margin-left: 17px; 
  /* background-color: white; */
  /* left: 50px; */
}
.el-upload {
  background-color: white;
}

.imgFenlei .imgBox img{
  width: 100px;
  height: 100px;
  overflow: hidden;
  object-fit: cover;
}
.contentBox{
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: red; */
}
.contentBox div{
  font-size: 14px;
  line-height: 35px;
  height: 100%;
  width: 70px;
}
.contentBox textarea {
  resize: none;
  height: 285px;
  width: 280px;
  margin-left: 1px;
  font-size: 30px;
  outline: none;
}
.foot{
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.foot .btn1,
.foot .btn2{
  width: 60px;
  height: 40px;
  font-size: 13px;
  color: black;
  cursor: pointer;
}
.foot .btn1{
  margin-right: 30px;
}
.foot .btn2{
  margin-left: 30px;
  background-color: white;
}
.foot .btn2:hover{
  background-color: aliceblue;
}

</style>